<template>
<div id="bottment">
    
  <router-link to="/">
    <div class="router" :class="router==0?'router1':''" @click="fn(0)">
        <span class="iconfont icon-jingxuancopy"></span>
        <li>精选</li>
    </div>
  </router-link>
  <router-link to="/ALL">
    <div class="router" :class="router==1?'router1':''" @click="fn(1)">
        <span class="iconfont icon-xianchang"></span>
        <li>全部</li>
    </div>
  </router-link>
  <router-link to="/SCENE">
    <div class="router" :class="router==2?'router1':''" @click="fn(2)">
        <span class="iconfont icon-quanbu"></span>
        <li>现场</li>
    </div>
  </router-link>
  <router-link to="/WALLET">
    <div class="router" :class="router==3?'router1':''" @click="fn(3)">
        <span class="iconfont icon-piaojia-copy"></span>
        <li>票夹</li>
    </div>
  </router-link>
  <router-link to="/Minezhuce">
    <div class="router" :class="router==4?'router1':''" @click="fn(4)">
      <span class="iconfont icon-wode"></span>
      <li>我的</li>
    </div>
  </router-link>

</div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'Footer',
  data(){
      return {
      }
  },
  computed:{
      ...mapState(['router'])
  },
  methods:{
      fn(asd){
        this.$store.commit("fn",asd)
      }
    //   myfn(){
        //编程式跳转
        // this.$router.push('/Mine') // 字符串
        // this.$router.push({ path:'/Mine'}) // 对象
    //   }
  }
}
</script>

<style scoped>
#bottment{
  height: 0.435rem;
  display: flex;
  font-size: 0.065rem;
  justify-content: space-around;
  align-items:center;
  color: #9d9ea3;
}
#bottment span{
    font-size: 0.155rem !important;
    margin-bottom: 0.01rem;
}
#bottment div{
    text-align: center;
    display: flex;
    flex-direction:column;
    justify-content:space-around;
}
.router{
  color: #9d9ea3;
  text-decoration: none;
}
.router1{
    color: hotpink;
    text-decoration: none;
}
</style>
